import {PageHeaderWrapper} from "@ant-design/pro-layout";
import React from "react";
import {Statistic, Table, Tag} from 'antd';

const {Countdown} = Statistic;

const TaskList = () => {
  const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: text => <a>{text}</a>,
    },
    {
      title: 'DeadLine',
      dataIndex: 'deadline',
      key: 'deadline',
      render: deadline => (
        <Countdown title="Day Level"  value={deadline} format="D 天 H 时 m 分 s 秒"/>
        )
    },
    {
      title: 'Tags',
      key: 'tags',
      dataIndex: 'tags',
      render: tags => (
        <span>
        {tags.map(tag => {

          if (null == tag.color) {
            tag.color = 'red';
          }

          return (
            <Tag color={tag.color} key={tag.text}>
              {tag.text.toUpperCase()}
            </Tag>
          );
        })}
      </span>
      ),
    },
    {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        <span>
        <a style={{marginRight: 16}}>完成{record.name}</a>
        <a>放弃</a>
      </span>
      ),
    },
  ];

  const data = [
    {
      key: '1',
      name: 'magenta',
      deadline: Date.now(),
      tags: [{text: '重要', color: 'magenta'}, {text: '紧急', color: 'red'}],
    },
    {
      key: '2',
      name: 'purple',
      deadline: new Date().getTime() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30,
      tags: [{text: '紧急', color: 'purple'}],
    },
    {
      key: '3',
      name: 'geekblue',
      deadline: Date.now() + 1000 * 60 * 60 * 24 * 1.5 + 1000 * 30,
      tags: [{text: '次要', color: 'geekblue'}, {text: '不紧急', color: 'blue'}],
    },
  ];


  return (<div>
    <Table columns={columns} dataSource={data}/>

  </div>);
}
export default TaskList;
